<template>
  <a-card :bordered="false" :loading="loading">
    <a-form
      class="m-t-10"
      :model="detailData"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 18 }"
      @finish="onFinish"
      @finish-failed="onFinishFailed"
    >
      <a-form :model="detailData" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
        <a-tabs v-model:rustic-key="rusticKey">
          <a-tab-pane :key="1" tab="乡村基本信息">
            <a-form-item
              label="乡村名称"
              name="name"
              :rules="{ required: true, message: '请输入乡村名称' }"
            >
              <a-input
                v-model:value="detailData.name"
                placeholder="请输入乡村名称"
                :maxlength="30"
              />
            </a-form-item>
            <a-form-item
              label="封面"
              name="cover"
              :rules="{ required: true, message: '请添加封面' }"
            >
              <upload-image
                :image-str="detailData.cover"
                :component-props="{ maxCount: 1 }"
                upload="上传"
                :max-file-size-mb="4"
                @on-change-upload="(value) => (detailData.cover = value)"
              />
              <span class="text-hex-999">支持拓展名：.jpg.jpeg.png</span>
            </a-form-item>
            <a-form-item label="乡村地点">
              <div class="w-full flex">
                <a-form-item
                  name="address"
                  class="flex-1 m-r-4"
                  :rules="{ required: true, message: '请添加乡村地点' }"
                >
                  <a-input
                    ref="addressInput"
                    v-model:value="detailData.address"
                    class="address_input"
                    placeholder="请选择地点"
                    @click="mapModalVisible = true"
                  />
                </a-form-item>
                <a-form-item name="detailedAddress" class="flex-1">
                  <a-input
                    v-model:value="detailData.detailedAddress"
                    placeholder="可输入补充内容，如：3楼101室"
                  />
                </a-form-item>
              </div>
            </a-form-item>
            <a-form-item
              label="乡村简介"
              name="briefIntro"
              :rules="{ required: true, message: '请添加乡村简介' }"
            >
              <a-textarea
                v-model:value="detailData.briefIntro"
                placeholder="请输入乡村简介"
                :maxlength="200"
              />
            </a-form-item>
            <a-form-item
              label="联系方式"
              name="mobile"
              :rules="[
                { required: true, message: '请添加联系方式' },
                { pattern: mobileRegExp, trigger: 'change', message: '请输入正确的手机号码' },
              ]"
            >
              <a-input
                v-model:value="detailData.mobile"
                placeholder="请输入联系方式"
                :maxlength="11"
              />
            </a-form-item>
            <a-form-item label="轮播图片" name="images">
              <upload-image
                :image-str="detailData.images"
                :component-props="{ maxCount: 5 }"
                upload="上传"
                :max-file-size-mb="4"
                @on-change-upload="(value) => (detailData.images = value)"
              />
              <span class="text-hex-999">支持拓展名：.jpg.jpeg.png</span>
            </a-form-item>
            <a-col :span="24">
              <a-form-item
                label="详细介绍"
                name="introduce"
                :label-col="{ span: 3 }"
                :wrapper-col="{ span: 22 }"
                :rules="{ required: true, message: '请填写详细介绍' }"
              >
                <tinymce-editor
                  v-model:value="detailData.introduce"
                  placeholder="可在此处添加乡村详细介绍，以展示本村风貌（2000字内）"
                ></tinymce-editor>
              </a-form-item>
            </a-col>
          </a-tab-pane>
        </a-tabs>
      </a-form>
      <a-form-item :wrapper-col="{ span: 24 }">
        <div class="text-center">
          <a-button class="mr-50px" type="primary" html-type="submit">保存</a-button>
          <a-button @click="closeTab">返回</a-button>
        </div>
      </a-form-item>
    </a-form>
    <map-modal
      :visible="mapModalVisible"
      :selected-location="detailData.address"
      :center="[detailData.lng, detailData.lat]"
      @ok="onOk"
      @cancel="onCancel"
    />
  </a-card>
</template>

<script setup lang="tsx">
  import { message } from 'ant-design-vue';
  import { formatToDateTime } from '@/utils/dateUtil';
  import DynamicForm from '@/components/dynamicForm/index.vue';
  import useRequestDetail from '@/hooks/useRequestDetail';
  import { mobileRegExp } from '@/utils/common';
  import { rusticApi, createRustic, updateRustic } from '@/api/rustic/rustic';
  import { useTabsViewStore } from '@/store/modules/tabsView';

  const format = 'YYYY-MM-DD HH:mm';
  const route = useRoute();
  const tabsViewStore = useTabsViewStore();
  const mapModalVisible = ref<boolean>(false);
  const current = ref<number>(0);
  const rusticKey = ref<number>(1);

  defineOptions({
    name: 'rusticEdit',
  });

  const onOk = (data: any) => {
    console.info('modalData ==>,', data);
    detailData.value = { ...detailData.value, ...data };
    detailData.value.address = data.location;
    detailData.value.lng = data.lng;
    detailData.value.lat = data.lat;
  };
  const onCancel = () => {
    mapModalVisible.value = false;
  };

  const { detailData, loading } = useRequestDetail({
    apiKey: rusticApi.rusticDetail,
    initParams: route?.query,
    isMount: !!Object.values(route?.query).length && !!Object.values(route?.query)[0],
  });

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  const onFinish = (values: any) => {
    submitForm(detailData.value);
  };

  const submitForm = async (params: API.CreateRusticParams) => {
    const rusticId = route?.query?.id;
    const res = rusticId ? await updateRustic({ ...detailData.value }) : await createRustic(params);
    if (res) {
      message.success(res?.msg);
      closeTab();
    }
  };

  const closeTab = () => {
    tabsViewStore.closeCurrentTab(route);
  };
</script>

<style></style>
